<!-- 
 * @Author: 邵渊
 * @LastEditors: Please set LastEditors
 * @Description: 金额
-->
<template>
  <div class="lc-input-money">
    <el-tooltip
      class="item"
      effect="dark"
      :content="`${props.templateType.value} ${innerValue}`"
      placement="top-end"
    >
      <el-input-number
        class="lc-input"
        v-model="innerValue"
        v-bind="$attrs"
        :controls="false"
        :precision="precision"
        @change="changeMoneyFun($event)"
        @input="(e) => $emit('input', e)"
        @blur="(e) => $emit('blur', e)"
        @focus="(e) => $emit('focus', e)"
        @clear="$emit('clear')"
      >
        <template v-if="props.templateType.type == 'suffix'" #suffix>
          <span>{{ props.templateType.value }}</span>
        </template>
        <template v-if="props.templateType.type == 'prefix'" #prefix>
          <span>{{ props.templateType.value }}</span>
        </template>
      </el-input-number>
    </el-tooltip>
  </div>
</template>

<script setup>
import { ref, watch } from "vue";
const props = defineProps({
  modelValue: {
    type: [Number, String],
    default: "",
  },
  /* 最大整数位数 */
  maxIntegerDigits: {
    type: [Number, String],
    default: 12,
  },
  //最大小数点位数
  maxDecimalDigits: {
    type: [Number, String],
    default: 4,
  },
  appends: {
    type: Array,
    default: () => [],
  },
  // 数值精度
  precisionValue: {
    type: [Number, String],
    default: 2,
  },
  // 输入框 头部prefix/suffix尾部 内容
  templateType: {
    type: Object,
    default: () => {},
  },
});
const emits = defineEmits([
  "input",
  "change",
  "blur",
  "focus",
  "clear",
  "update:modelValue",
]);
const innerValue = ref(props.modelValue);
const precision = ref(props.precisionValue);

function changeMoneyFun() {
  emits("update:modelValue", innerValue.value);
}

watch(
  () => props.modelValue,
  () => (innerValue.value = props.modelValue),
);
</script>
<style scoped>
.lc-input-money {
  .lc-input {
    width: 100%;
    text-align: right;
  }
}

:deep(.el-input__inner) {
  text-align: right;
}
</style>
